<template>
    <div>
        <div @click="cancle" v-if="visible" class="v-shadow"></div>
        <mt-popup v-model="visible" :modal="false" position="bottom" class="mint-datetime">
            <mt-picker
                    :slots="slots"
                    @change="onAddressChange"
                    show-toolbar>
                <span class="mint-datetime-action mint-datetime-cancel" @click="cancle">{{ cancelText }}</span>
                <span class="mint-datetime-action mint-datetime-confirm" @click="confirm">{{ confirmText }}</span>
            </mt-picker>
        </mt-popup>
    </div>
</template>

<script>
    import cityCode from './cityCode';
    import {mapState} from "vuex";
    export default{
        name: "cityPicker",
        componentName: 'cityPicker',
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            cancelText: {
                type: String,
                default: '取消'
            },
            confirmText: {
                type: String,
                default: '确定'
            },
        },
        data() {
            return {
                value: null,
                slots: [
                    {flex: 1, values: Object.keys(cityCode), className: "slot1", textAlign: "center"},
                    {divider: !0, content: "-", className: "slot2"},
                    {flex: 1, values: ["北京市"], className: "slot3", textAlign: "center"}
                ],
                currentValue: {proivnce: {key: '', value: ''}, city: {key: '', value: ''}}
            }
        },
        methods: {
            onAddressChange(t, e) {
                if (cityCode[e[0]]) {
                    t.setSlotValues(1, Object.keys(cityCode[e[0]]['children'])),
                        this.currentValue = {
                            proivnce: {value: cityCode[e[0]]['value'], key: e[0]},
                            city: {value: cityCode[e[0]]['children'][e[1]], key: e[1]}
                        }
                }
            },
            confirm(){
                this.$emit('cityToggle', false);
                this.$emit('confirm', this.currentValue);
            },
            cancle(){
                this.$emit('cityToggle', false);
                this.$emit('cancel')
            },
        },
        created(){

        }
    }
</script>

<style>
    .v-shadow {
        width: 100%;
        height: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        opacity: 0.5;
        background: #000;
    }
</style>